<template>
    <div class="chat-gpt">
        <div ref="chatList" class="chat-list">
            <div
                v-for="(item, index) in chatList"
                :key="index"
                :class="{ 'right-item': item.role != 'assistant' }"
            >
                <VueMarkdown
                    v-if="item.role == 'assistant'"
                    :key="item.content"
                    class="left"
                    >{{ item.content }}</VueMarkdown
                >

                <div v-else class="right">{{ item.content }}</div>
            </div>
            <div v-if="loading" class="left">
                正在思考 <i class="el-icon-loading"></i>
            </div>
        </div>
        <div class="input" @keydown="keydown">
            <el-input placeholder="请输入内容" v-model="input2">
                <template slot="append">
                    <div v-if="!loading" @click="submitChat" style="cursor: pointer;">提问</div>
                    <i v-else class="el-icon-loading"></i>
                </template>
            </el-input>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

import { chat_run, get_chatmsg, userGetUserInfo } from "@/assets/api/indexApi";

import VueMarkdown from "vue-markdown";
export default {
    components: {
        VueMarkdown,
    },
    head() {
        return {
            title: "小竹智能GPT-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹,财税,小竹财税,小竹智能GPT",
                },
            ],
        };
    },
    data() {
        return {
            input2: "",
            chatList: [],
            loading: false,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    mounted() {
        let that = this;
        // this.getUserInfo2().then((user) => {
        // if (user) {
        // that.get_chatmsg();
        // }
        // });
    },
    methods: {
        ...mapActions("common", ["getUserInfo2"]),

        async submitChat() {
            if (this.loading) return;
            const input2 = this.input2;
            this.loading = true;
            this.chatList.push({
                role: "user",
                content: input2,
            });
            this.$nextTick(() => {
                this.scrollBottom();
                this.input2 = "";
            });
            const res = await chat_run({
                content: input2,
            });
            if (res.code == 1) {
                this.input2 = "";
                this.chatList.push({
                    role: "assistant",
                    content: res.data,
                });
                this.loading = false;
                this.$nextTick(() => {
                    this.scrollBottom();
                });
            }
        },

        async get_chatmsg() {
            const res = await get_chatmsg({
                // user_id: this.userInfo.id,
            });
            if (res.code == 1) {
                this.chatList = res.data.messages;
                this.$nextTick(() => {
                    this.scrollBottom();
                });
            }
        },

        scrollBottom() {
            this.$nextTick(() => {
                this.$refs.chatList.scrollTop =
                    this.$refs.chatList.scrollHeight;
            });
        },

        keydown(e) {
            if (!e.shiftKey && e.keyCode == 13) {
                e.cancelBubble = true; //ie阻止冒泡行为
                e.stopPropagation(); //Firefox阻止冒泡行为
                e.preventDefault(); //取消事件的默认动作*换行
                //以下处理发送消息代码
                if (e.keyCode == 13) {
                    this.submitChat();
                }
            }
        },
    },
};
</script>
<style>
#meiqia-container {
    position: relative;
    z-index: 999;
}
</style>
<style scoped lang="scss">
.chat-gpt {
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    z-index: 1000;
}
.chat-list {
    width: 100%;
    height: calc(100vh - 50px);
    margin: 0 auto;
    padding: 10px 20px;
    background-color: #ecf0fe;
    overflow: auto;
    .left,
    .right {
        margin-top: 20px;
        // white-space: normal;
        border-radius: 4px;
        padding: 11px 21px;
        font-size: 0.8rem;
        color: #333333;
        max-width: 70%;
    }
    .left {
        border-radius: 6px 20px 20px 20px;
        color: #1e1f24;
        // text-align: justify;
        line-height: 1.5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 13px 19px;
        background-color: #fff;
        position: relative;
    }
    .right {
        padding: 9px 24px;
        animation: to-top-left_AZOpW 0.16s linear;
        animation-fill-mode: forwards;
        transform-origin: right bottom;
        white-space: pre-wrap;
        display: inline-block;
        max-width: 87%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 13px 19px;
        background-color: #7365ff;
        position: relative;
        line-height: 1.75;
        letter-spacing: 0.6px;
        color: #fafafa;
        text-align: left;
        border-radius: 20px;
        border-bottom-right-radius: 4px;
        word-break: break-all;
    }
    .right-item {
        display: flex;
        justify-content: flex-end;
    }
}

@keyframes to-top-left_AZOpW {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

.input {
    width: 100%;
    margin: 0 auto;
    height: 50px;
    padding-bottom: 10px;
    background-color: #ecf0fe;
}
</style>